<template>
  <div style="margin: 10px;">
    <el-alert
      v-if="jsonError"
      type="error"
      :title="jsonError"
      show-icon
      closable
    />

    <el-row  :gutter="10">
      <el-col :span="12">
        <el-card>
          <div class="json-container">
            <el-input
              type="textarea"
              v-model="generationStore.userWorkflow"
              placeholder="输入工作流 JSON"
              :autosize="{ minRows: 25 }"
              @input="handleWorkflowChange"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="json-container">
            <pre v-if="!jsonError">{{ workflowPreview }}</pre>
            <div v-else class="error-message">
              {{ jsonError }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useGenerationStore } from '@renderer/stores/useGenerationStore';
import { ref, computed } from 'vue';

const generationStore = useGenerationStore();
const jsonError = ref('');

const workflowPreview = computed(() => {
  try {
    const json = JSON.parse(generationStore.comfyuiWorkFlowJson);
    jsonError.value = '';
    return JSON.stringify(json, null, 2);
  } catch (error) {
    jsonError.value = `JSON 解析错误: ${error.message}`;
    return '无效的工作流数据';
  }
});

const handleWorkflowChange =(value: string)=> {
  generationStore.userWorkflow = value;
}

</script>

<style scoped>
.json-container {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  background-color: #f8f8f8;
  padding: 10px;
  border-radius: 4px;
  max-height: 70vh;
  overflow: auto;
  white-space: pre-wrap;
}

.error-message {
  color: #f56c6c;
  padding: 10px;
}
</style>
